<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>recharge</title>
		<script type="text/javascript" src="js/pxtorem.js"></script>
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="iconfont/iconfont.css" />
	   	<link rel="stylesheet" href="css/recharge.css" />
	</head>
	<body>
		<header class='headerBox'>
			<div class='goBack mui-action-back'>
				<i class='inline_logo  icon iconfont icon-fanhui gobackIcon'></i>
			</div>
			<p class='title'>鱼币充值</p>
		</header>
		
		<div class='chooseMoneyBox'>
			<p class='model_title chooseMoney_title'>选择金额</p>
			<ul class='chooseMoneyListBox'>
				<li class='chooseMoneyList active'>
					<p class='chooseMoneyText_box'>
						<i class='inline_logo chooseMoney_logo'></i>
						<span class='chooseMoney_fishMoney'>500</span>
					</p>
					<p class='chooseMoneyText_box'>
						<span class='chooseMoney_Money'>￥500</span>
					</p>
				</li>
				<li class='chooseMoneyList'>
					<p class='chooseMoneyText_box'>
						<i class='inline_logo chooseMoney_logo'></i>
						<span class='chooseMoney_fishMoney'>1000</span>
					</p>
					<p class='chooseMoneyText_box'>
						<span class='chooseMoney_Money'>￥1000</span>
					</p>
				</li>
				<li class='chooseMoneyList'>
					<p class='chooseMoneyText_box'>
						<i class='inline_logo chooseMoney_logo'></i>
						<span class='chooseMoney_fishMoney'>1500</span>
					</p>
					<p class='chooseMoneyText_box'>
						<span class='chooseMoney_Money'>￥1500</span>
					</p>
				</li>
				<li class='chooseMoneyList'>
					<p class='chooseMoneyText_box'>
						<i class='inline_logo chooseMoney_logo'></i>
						<span class='chooseMoney_fishMoney'>2000</span>
					</p>
					<p class='chooseMoneyText_box'>
						<span class='chooseMoney_Money'>￥2000</span>
					</p>
				</li>
			</ul>
			<div class='chooseMoney_diyBox'>
				<p class='chooseMoney_diyText'>自定义金额: ￥</p>
				<input type="text" class='chooseMoney_diyinput' placeholder="自定义金额"/>
			</div>
			<p class='chooseMoney_diyText chooseMoney_diyTextRemark'>注：￥1 = 1鱼币   其他字符用0替换</p>
		</div>
		
		<p class='model_title choosepayType_text'>支付方式</p>
		<ul class='choosepayType_box'>
			<li class='choosepayType_list'>
				<div class='choosepayType_listbox'>
					<i class='inline_logo wechatPay_logo'></i>
					<span class='payType_text'>微信支付</span>
				</div>
				<i class='inline_logo choosePay_logo active'></i>
			</li>
			<li class='choosepayType_list'>
				<div class='choosepayType_listbox'>
					<i class='inline_logo aliPay_logo'></i>
					<span class='payType_text'>支付宝</span>
				</div>
				<i class='inline_logo choosePay_logo'></i>
			</li>
		</ul>
		<p class='payRemark'>注：充值后不支持退款</p>
		
		<div class='recharge_btn'>
			立即充值
		</div>
	</body>
	<script src="js/mui.js"></script>
	<script type="text/javascript">
		mui.init();
		//重写返回键
		var oldback=mui.back;
		mui.plusReady(function() {
			mui.back = function() {
		      plus.webview.currentWebview().close();
		      oldback();
		    } 
			//手机的返回键
		    plus.key.addEventListener('backbutton', function() {
		        plus.webview.currentWebview().close();
		        oldback();
		    }, false);
		
		});
		//充值的设置
        var oldClientHeight=document.documentElement.clientHeight||document.body.clientHeight;
        window.addEventListener('resize',function(e){
        	var newClientHeight=document.documentElement.clientHeight||document.body.clientHeight;
        	if(oldClientHeight>newClientHeight){
        		mui('.recharge_btn')[0].style.display="none";
        	}else{
        		mui('.recharge_btn')[0].style.display="block";
        	}
        })
        //自定义金额的设置
        var chooseMoneyList=document.querySelectorAll('.chooseMoneyList');
        for(let i=0;i<chooseMoneyList.length;i++){
        	chooseMoneyList[i].addEventListener('tap',function(e){
        		for(let j=0;j<chooseMoneyList.length;j++){
        			chooseMoneyList[j].classList.remove('active');
        		}
        		this.classList.add('active');
        	})
//      	
        }
        var chooseMoney = mui('.chooseMoney_diyinput')[0];
        chooseMoney.addEventListener('focus',function(){
        	for(var i=0;i<chooseMoneyList.length;i++){
           	        chooseMoneyList[i].classList.remove('active');
            }
        })
        
        mui('.recharge_btn')[0].addEventListener('click',function(e){
        	var chooseMoneyValue=chooseMoney.value;
        	chooseMoneyValue=chooseMoneyValue.trim();
        	//先判断自定义的数据
        	if(chooseMoneyValue.trim()==""){
        		for(let i=0;i<chooseMoneyList.length;i++){
        			var arr=Array.from(chooseMoneyList[i].classList);
        		    if(arr.includes('active')){
        		    	var chooseMoneyListValue=chooseMoneyList[i].children[0].children[1].innerText;
        		    	alert(chooseMoneyListValue);
        		    	break;
        		    }
        		}
        		if(!arr.includes('active')){
        		    mui.toast('您还没有选择充值项')
        		}
        	}else if(chooseMoneyValue<=0){
        		mui.toast('输入金额不能小于0');
        		return;
             }else{
                chooseMoneyValue=chooseMoneyValue.replace(/[^(\d)]/g,0);
        	    var index=chooseMoneyValue.match(/[^0(/d)]/).index;
		        alert(chooseMoneyValue.slice(index))	
		        return;
             }
        })
       
	</script>
</html>
